<template>
	<w-layout showNavbar navTitle="无限赏" :navTitleColor="publicStyles['--color-t1']" background="url('/static/image/bk.png') no-repeat"
		navBackgroundColor="transparent" :scrollTop="page.scrollTop" :navScrollColor="publicStyles['--color-bk']">
		<template #navRight>
			<view @click="popup.showRule = true" class="">
				规则
			</view>
		</template>
		<template #default>
			<view class="container">
				<view class="fr-ac">
					<image v-if="false" class="mr-30" style="width: 92rpx;height: 96rpx;" src="/static/icon/public/lingzhu.png" mode=""></image>
					<view @click="$u.route(`/pages/wuxian_shang/history?id=${state.goods_id}`)" class="public-btn-10 px-40 fr-ac flex-1" style="min-height: 112rpx;">
						<cut-corner :arrow="2" clipSize="16rpx">
							<image style="width: 64rpx;height: 64rpx;" :src="state.goodsInfo.imgurl" mode=""></image>
						</cut-corner>
						<view class="ml-20">
							当前奖池赏品
						</view>
						<view class="color mr-5 ml-auto">
							上期获奖名单
						</view>
						<image style="width: 24rpx;height: 24rpx;" src="/static/icon/public/right-fill.png" mode=""></image>
					</view>
				</view>
				
				<up-gap height="40"></up-gap>
				<view class="fc-ac" style="position: relative;">
					<image style="width: 400rpx;height: 400rpx;position: absolute;left: 50%;top: 50%;transform: translateX(-50%);" src="/static/icon/public/base.png" mode=""></image>
					<swiper 
						:indicator-dots="false" 
						:autoplay="false"
						:current="swiper.current"
						@change="swiperChange" 
						circular 
						previous-margin="196rpx" 
						next-margin="196rpx"
						style="width: 100%;height: 280rpx;"
					>
						<swiper-item class="swiper-item fc-ac-jc" v-for="(item,index) in swiper.list" :key="item.id">
							<view class="public-img-2 px-10 py-10">
								<cut-corner :arrow="2" clipSize="26rpx">
									<view
										:class="[swiper.current == index?'swiper-item-active':'swiper-item-default']"
									>
										<image class="transition" :src="item.imgurl" mode=""></image>
									</view>
								</cut-corner>
							</view>
						</swiper-item>
					</swiper>
				</view>
				<up-gap height="110"></up-gap>
				<view class="fr-ac">
					<view class="">
						<up-tabs
							@change="tabChange"
							:list="tabs.list" 
							:current="tabs.current"
							lineWidth="14"
							lineHeight="14"
							:lineColor="`url('/static/icon/public/top-fill.png') 100% 100%`"
							:activeStyle="{
								color: publicStyles['--color'],
								fontWeight: 'bold',
								transform: 'scale(1.2)'
							}"
							itemStyle="height: 60px;"
							:inactiveStyle="{
								'font-size': '32rpx',
							}"
						>
						</up-tabs>
					</view>
					<view @click="setStar" class="fr-ac ml-auto">
						<view class="">
							<image v-if="state.info.collection_is == 1" style="width: 32rpx;height: 32rpx;" src="/static/icon/public/star-fill.png" mode=""></image>
							<image v-else style="width: 32rpx;height: 32rpx;" src="/static/icon/public/star.png" mode=""></image>
						</view>
						<view class="ml-10 op-70 fs-32">
							收藏
						</view>
					</view>
				</view>
				
				<!-- 赏品预览 -->
				<template v-if="tabs.current == 0">
					<view style="min-height: 320rpx;position: relative;" class="public-card-6 fc px-5 py-5 mt-40" v-for="(item,index) in state.list" :key="index">
						<view class="fr-ac px-40 mt-30">
							<image style="width: 64rpx;height: 64rpx;border-radius: 50%;" :src="item.shang_imgurl" mode="widthFix"></image>
							<view class="ml-30 flex-1">
								<text class="op-70">{{item.pro}}</text>
								<text class="op-30 fs-24 ml-10">(此概率为当前赏类别出赏几率)</text>
							</view>
						</view>
						<view class="mt-35 pb-40 px-40" style="">
							<scroll-view class="" scroll-x="true" >
								<view class="fr-ac">
									<view @click="previewGoods(item2)" class="mr-30" style="max-width: 150rpx;" v-for="(item2,index2) in item.goods_list" :key="index2">
										<cut-corner :arrow="2" clipSize="25rpx">
											<image style="width: 150rpx;height: 150rpx;" :src="item2.imgurl" mode="widthFix"></image>
										</cut-corner>
										<view class="fs-24 mt-15 ellipsis-1">
											{{item2.title}}
										</view>
									</view>
								</view>
							</scroll-view>
							<view v-if="tabs.current == 3" class="color fs-24 mt-25">
								驳回原因：时间设置错误，请重新设置
							</view>
						</view>
					</view>
				</template>
				
				<!-- 中赏详情 -->
				<template v-if="tabs.current == 1">
					<view class="public-btn-11 px-20 mt-40">
						<up-tabs
							@change="levelTabChange"
							:list="level_tabs.list" 
							:current="level_tabs.current"
							lineWidth="14"
							lineHeight="14"
							:lineColor="'transparent'"
							:activeStyle="{
								color: publicStyles['--color'],
								fontWeight: 'bold',
								transform: 'scale(1)'
							}"
							itemStyle="height: 45px;width:70rpx;"
						>
						</up-tabs>
					</view>
					<view class="mt-40 u-border-bottom pb-30 fr-ac" style="border-color: var(--gray-line) !important;" v-for="(item,index) in state.list" :key="index">
						<view class="" style="position: relative;">
							<image style="width: 80rpx;height: 80rpx;border-radius: 50%;" :src="item.user_info.headimg" mode=""></image>
							<image v-if="item.user_info.vip_imgurl" style="width: 80rpx;height: 80rpx;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);" :src="item.user_info.vip_imgurl" mode="widthFix"></image>
						</view>
						<view class="w-28 mx-20">
							<view class="ellipsis-1 op-90">
								{{item.user_info.nickname}}
							</view>
						</view>
						<view class="flex-1 ml-10 fr-ac">
							<image style="width: 80rpx;height: 80rpx;" :src="item.goodslist_imgurl" mode=""></image>
							<view class="mx-15 flex-1">
								<view class="ellipsis-1 op-90">
									{{item.goodslist_title}}
								</view>
								<!-- <view class="color mt-10">
									¥ 199.00
								</view> -->
							</view>
							<view v-if="item.cha_luck_no" class="ml-auto">
								<cut-corner :arrow="3" clipSize="8rpx">
									<view class="color fr-ac-jc fs-26" style="width: 54rpx;height: 50rpx;background-color: #153E4C;">
										x{{item.cha_luck_no}}
									</view>
								</cut-corner>
							</view>
						</view>
					</view>
				</template>
				<no-more :show="state.list.length == 0"></no-more>
				
				
				<fixed-bottom>
					<template #default>
						<view class="px-40 w-100 h-100 fr-ac-jsb">
							<view @click="openPaymentPopup(1)" class="public-btn-8 fr-jc color" style="width: 144rpx;height: 76rpx;line-height: 60rpx;">
								<view class="text-color-b">
									一发
								</view>
							</view>
							<view @click="openPaymentPopup(3)" class="public-btn-8 fr-jc color" style="width: 144rpx;height: 76rpx;line-height: 60rpx;">
								<view class="text-color-b">
									三发
								</view>
							</view>
							<view @click="openPaymentPopup(5)" class="public-btn-8 fr-jc color" style="width: 144rpx;height: 76rpx;line-height: 60rpx;">
								<view class="text-color-b">
									五发
								</view>
							</view>
							<view @click="openPaymentPopup(10)" class="public-btn-8 fr-jc color" style="width: 144rpx;height: 76rpx;line-height: 60rpx;">
								<view class="text-color-b">
									十发
								</view>
							</view>
						</view>
					</template>
				</fixed-bottom>
				
				<popup-good-card
					:show="CardPopup.show"
					:title="CardPopup.title"
					:name="CardPopup.name"
					:src="CardPopup.src"
					:price="CardPopup.price"
					@close="CardPopup.show = false"
				></popup-good-card>
				
				<up-popup :show="popup.showRule" @close="popup.showRule = false" mode="center" :safeAreaInsetBottom="false" bgColor="transparent">
					<view class="public-popup-2 px-50 py-20 fc" style="width: 670rpx;min-height: 760rpx;position: relative;">
						<view class="fs-36">
							规则说明
						</view>
						<view class="mt-80" style="max-height: 400rpx;overflow: scroll;line-height: 1.8;">
							<view class="">
								<up-parse :content="state.rule"></up-parse>
							</view>
						</view>
						<view @click="popup.showRule = false;" class="public-btn-3 transition py-25 t-c mt-auto mb-60">
							<view class="text-color-b fs-32">
								确认
							</view>
						</view>
					</view>
				</up-popup>
				
				<up-popup :show="popup.showMaster" @close="popup.showMaster = false" mode="center" :safeAreaInsetBottom="false" bgColor="transparent">
					<view class="public-popup-4 px-50 py-20 fc" style="width: 670rpx;min-height: 900rpx;position: relative;">
						<view class="fs-36">
							领主玩法
						</view>
						<view class="mt-50 fc-ac">
							<image class="" style="width: 128rpx;height: 132rpx;" src="/static/icon/public/lingzhu.png" mode=""></image>
							<view class="mt-20 op-70">
								简中补充包整盒
							</view>
						</view>
						
						<view class="mt-30" style="max-height: 350rpx;overflow: scroll;line-height: 1.8;">
							<view class="" style="opacity: 0.7;">
								这是一条最新公告的详细描述，这是一条最新公告的详细描述，这是一条最新公告的详细描述，这是一条最新公告的详细描述，这是一条最新公告的详细描述，这是一条最新公告的详细描述，这是一条最新公告的详细描述，这是一条最新公告的详细描述，这是一条最新公告的详细描述。
								这是一条最新公告的详细描述，这是一条最新公告的详细描述，这是一条最新公告的详细描述，这是一条最新公告的详细描述，这是一条最新公告的详细描述，这是一条最新公告的详细描述，这是一条最新公告的详细描述，这是一条最新公告的详细描述，这是一条最新公告的详细描述。
								这是一条最新公告的详细描述，这是一条最新公告的详细描述，这是一条最新公告的详细描述，这是一条最新公告的详细描述，这是一条最新公告的详细描述，这是一条最新公告的详细描述，这是一条最新公告的详细描述，这是一条最新公告的详细描述，这是一条最新公告的详细描述。
								这是一条最新公告的详细描述，这是一条最新公告的详细描述，这是一条最新公告的详细描述，这是一条最新公告的详细描述，这是一条最新公告的详细描述，这是一条最新公告的详细描述，这是一条最新公告的详细描述，这是一条最新公告的详细描述，这是一条最新公告的详细描述。
								这是一条最新公告的详细描述，这是一条最新公告的详细描述，这是一条最新公告的详细描述，这是一条最新公告的详细描述，这是一条最新公告的详细描述，这是一条最新公告的详细描述，这是一条最新公告的详细描述，这是一条最新公告的详细描述，这是一条最新公告的详细描述。
							</view>
						</view>
						<view @click="popup.showMaster = false;" class="public-btn-3 transition py-25 t-c mt-auto mb-60">
							<view class="text-color-b fs-32">
								确认
							</view>
						</view>
					</view>
				</up-popup>
				
				<up-popup :show="popup.showObtain" @close="popup.showObtain = false" mode="center" :safeAreaInsetBottom="false" bgColor="transparent">
					<view class="public-popup-4 px-50 py-20 fc" style="width: 670rpx;min-height: 900rpx;position: relative;">
						<view class="fs-36">
							恭喜获得
						</view>
						<view class="mt-80 fc-ac">
							<view class="public-cover-2 t-c fs-36" style="width: 360rpx;height: 70rpx;">
							</view>
							
							<view v-if="false" class="">
								<view class="mt-100" style="position: relative;">
									<cut-corner :arrow="2" clipSize="26rpx">
										<image style="width: 250rpx;height: 250rpx;background-color: #000;" src="/static/logo.png" mode=""></image>
									</cut-corner>
									<view class="" style="position: absolute;top: 0;left: 0;z-index: 88;">
										<cut-corner :arrow="3" clipSize="8rpx">
										<view class="px-8 py-2 fs-24" style="background-color: var(--color);color: #002C33;">
											最终赏
										</view>
										</cut-corner>
									</view>
									<view class="px-10 fs-24" style="position: absolute;bottom: 0;right: 0;z-index: 88;background: rgba(0,0,0,0.5);">
										x1
									</view>
								</view>
								<view class="mt-40 t-c">
									赏品详细名称
								</view>
								<view class="fs-24 mt-15 op-50 t-c">
									可兑换 ¥20.00
								</view>
							</view>
							<view v-if="true" class="my-40 gap-40" style="display: grid;grid-template-columns: repeat(3,1fr);">
								<view class="" v-for="(item,index) in 6" :key="index">
									<view class="" style="position: relative;">
										<cut-corner :arrow="2" clipSize="26rpx">
											<image style="width: 170rpx;height: 170rpx;background-color: #000;" src="/static/logo.png" mode=""></image>
										</cut-corner>
										<view class="" style="position: absolute;top: 0;left: 0;z-index: 88;">
											<cut-corner :arrow="3" clipSize="8rpx">
											<view class="px-8 py-2 fs-24" style="background-color: var(--color);color: #002C33;">
												最终赏
											</view>
											</cut-corner>
										</view>
										<view class="px-10 fs-24" style="position: absolute;bottom: 0;right: 0;z-index: 88;background: rgba(0,0,0,0.5);">
											x1
										</view>
									</view>
									<view class="mt-40 t-c">
										赏品详细名称
									</view>
									<view class="fs-24 mt-15 op-50 t-c">
										可兑换 ¥20.00
									</view>
								</view>
							</view>
						</view>
						<view class="fr-ac-jsb gap-30 mt-auto">
							<view @click="popup.showObtain = false;" class="public-btn-9 flex-1 transition py-25 t-c mb-60">
								<view class="text-color-b fs-32">
									重抽
								</view>
							</view>
							<view @click="popup.showObtain = false;" class="public-btn-9 flex-1 transition py-25 t-c mb-60">
								<view class="text-color-b fs-32">
									去盒柜
								</view>
							</view>
							<view @click="popup.showObtain = false;" class="public-btn-9 flex-1 transition py-25 t-c mb-60">
								<view class="text-color-b fs-32">
									确定
								</view>
							</view>
						</view>
						
					</view>
				</up-popup>
				
				<payment 
					:show="PaymentPopup.show" 
					type="yuanbao"
					:goods_id="PaymentPopup.goods_id"
					:goods_num="PaymentPopup.goods_num"
					@callback="callback"
					@close="closePaymentPopup"
				></payment>
				<choujiang ref="jiangpin_show" @close="jiangpin_showClose"></choujiang>
				
				<up-popup :show="GoodsPopup.show" @close="GoodsPopup.show=false" mode="center" :safeAreaInsetBottom="false" bgColor="transparent">
					<view class="public-popup-2 px-50 py-20 fc" style="width: 670rpx;position: relative;">
						<view class="fs-36">
							恭喜获得
						</view>
						<scroll-view scroll-x="true" class="mt-100">
							<view :class="GoodsPopup.list.length == 1?'fr-ac-jc':'fr-ac'">
								<view class="fc-ac mr-30" v-for="(item,index) in GoodsPopup.list" :key="index">
									<view class="color fs-24 t-c mb-20">
										{{item.shang_title}}
									</view>
									<cut-corner :arrow="2" clipSize="25rpx">
										<image style="width: 170rpx;height: 170rpx;" :src="item.goodslist_imgurl" mode="widthFix"></image>
									</cut-corner>
									<view class="fs-24 ellipsis-1 mt-15 op-90">
										{{item.goodslist_title}}
									</view>
									<view class="fs-20 mt-10 ellipsis-1 op-50">
										价值：{{item.goodslist_money}} 精粹
									</view>
								</view>
							</view>
						</scroll-view>
						<view @click="closeGoodsPopup" class="public-btn-3 transition py-25 t-c mt-auto mb-60">
							<view class="text-color-b fs-32">
								确定
							</view>
						</view>
					</view>
				</up-popup>
				
				
				<view v-if="PrizePopup.show"
					style="position: fixed;top: 0;left: 0;z-index: 999;background: rgba(0, 0, 0, 0.5);display: flex;align-items: center;justify-content: center;width: 100%;height: 100%;">
					<view @click="PrizePopup.show = false;GoodsPopup.show = true" style="width: 100%;height: 100%;"
						class="animate__animated animate__fadeIn">
						<video autoplay :controls="false" @ended="PrizePopup.show = false;GoodsPopup.show = true"
							style="width: 100%;height: 100%;" :src="PrizePopup.video_url"></video>
					</view>
				</view>
				
			</view>
		</template>
	</w-layout>
</template>

<script setup>
	import {
		ref,
		reactive,
		onMounted,
		computed,
		nextTick
	} from 'vue'
	import {
		storeToRefs
	} from 'pinia'
	import {
		onLoad, onPageScroll,
		onReachBottom
	} from '@dcloudio/uni-app'
	import {
		useAppStore
	} from '@/store/app'
	import {
		useColorStore
	} from '@/store/color'
	import {
		get_parse,
		infinite_goodsdetail,
		infinite_shang_log,
		addCollect,
		delCollect,
		get_purse_list,
		infinite_prizeorderlog,
		check_purse_goods
	} from '@/utils/request/api';
	import {
		useUserStore
	} from '@/store/user'
	const userStore = useUserStore()
	const appStore = useAppStore()
	const colorStore = useColorStore()
	const {
		publicStyles
	} = storeToRefs(colorStore)
	onLoad(async(options) => {
		if(options.id !== undefined){
			state.goods_id = options.id
			loadData()
			get_get_purse_list()
		}
		get_parseApi()
		
		if (options.order_num) {
			callback(options.order_num)
		}
	})
	onMounted(() => {
		appStore.loadingHandler(false)
	})
	onPageScroll((e)=>{
		page.scrollTop = e.scrollTop
	})
	onReachBottom(()=>{
		if(state.last_limit == state.limit){
			state.page++
			if(tabs.current == 1){
				loadData()
			}
		}
	})
	
	// 抽奖组件
	const jiangpin_show = ref(null)
	function jiangpin_showClose(type){
		console.log(type,'type jiangpin_showClose')
		setTimeout(() => {
			if (type) {
				clearInterval(timer.value)
				timer.value = null
				jiangpin_show.value.clear = true
				jiangpin_show.value.showAni = false
				
				if (timer.value) {
					clearInterval(timer.value)
					timer.value = null
				}
				get_check_purse_goods()
				initData()
				loadData()
			} else {
				if (!timer.value) {
					jiangpin_show.value.showAni = false
					jiangpin_show.value.clear = true
					
					if (timer.value) {
						clearInterval(timer.value)
						timer.value = null
					}
					get_check_purse_goods()
					initData()
					loadData()
				}
			}
		}, 500)
	}
	
	// 特奖数据
	const PrizePopup = reactive({
		show: false,
		video_url: '',
	})
	
	// 获取特奖信息
	async function get_check_purse_goods(){
		const res = await check_purse_goods({
			order_num: state.order_num
		})
		if (res.is_finish == 1) {
			PrizePopup.video_url = res.video_url
			PrizePopup.show = true
		}else{
			GoodsPopup.show = true
		}
	}
	
	
	
	async function get_parseApi(){
		get_parse({type:8}).then(res=>{
			state.rule = res
		})
	}
	
	const page = reactive({
		scrollTop:0
	})
	
	
	// 大类
	const tabs = reactive({
		current:0,
		list:[
			{
				id:'',
				name:'赏品预览',
			},
			{
				id:'',
				name:'中赏详情',
			}
		]
	})
	function tabChange(e){
		tabs.current = e.index
		console.log(tabs.current)
		initData()
		loadData()
	}
	
	
	// 等级
	const level_tabs = reactive({
		current:0,
		list:[]
	})
	function levelTabChange(e){
		level_tabs.current = e.index
		console.log(level_tabs.current)
		initData()
		loadData()
	}
	
	const state = reactive({
		order_num: '',
		goods_id: '',
		
		list:[],
		page:1,
		limit:20,
		last_limit:20,
		
		keyword:'',
		
		rule:'',
		
		info: {},
		goods_list: [],
		
		goodsInfo: {},
		
	})
	function initData(){
		state.list = []
		state.page = 1
		state.last_limit = 20
	}
	
	
	const popup = reactive({
		showRule:false,
		showObtain:false,
		showMaster:false,
	})
	
	function replaceBox(){
		uni.navigateTo({
			url:`/pages/yifan_shang/replace`
		})
	}
	
	
	const swiper = reactive({
		current:0,
		list:[]
	})
	function swiperChange(e){
		console.log(e,'eeeeeeeee')
		swiper.current = e.detail.current
	}
	
	function loadData(){
		if(tabs.current == 0){
			get_infinite_goodsdetail()
		}
		if(tabs.current == 1){
			get_infinite_shang_log()
		}
	}
	async function get_infinite_goodsdetail(){
		const res = await infinite_goodsdetail({
			goods_id: state.goods_id
		})
		state.info = res.goods
		state.list = res.goodslist
		swiper.list = res.goods_list.data
	}
	async function get_infinite_shang_log(){
		const res = await infinite_shang_log({
			goods_id: state.goods_id,
			shang_id: level_tabs.list.length? level_tabs.list[level_tabs.current].id : 0,
			page: state.page
		})
		level_tabs.list = res.category.map(e=>{
			return {
				id: e.shang_id,
				name: e.shang_title,
			}
		})
		state.list = state.list.concat(res.data)
	}
	
	async function setStar(){
		if(state.info.collection_is == 1) {
			const res = await delCollect({
				id: state.info.collection_id
			})
			uni.$u.toast('取消收藏成功')
		}else{
			const res = await addCollect({
				goods_id: state.goods_id,
				goods_num: 0
			})
			uni.$u.toast('收藏成功')
		}
		state.info.collection_is = state.info.collection_is == 1? 0:1
	}
	
	const PaymentPopup = reactive({
		show: false,
		goods_id: '',
		goods_num: '',
	})
	async function openPaymentPopup(num){
		PaymentPopup.goods_id = state.goods_id
		PaymentPopup.goods_num = num
		PaymentPopup.show = true
	}
	function closePaymentPopup(num){
		PaymentPopup.show = false
	}
	
	function previewGoods(item){
		console.log(item,'==')
		swiper.current = swiper.list.findIndex(e=>e.imgurl == item.imgurl)
		
		openCardPopup(item)
	}
	
	// 卡片详情
	const CardPopup = reactive({
		show: false,
		title: '赏品详情',
		name: '',
		src: '',
		price: '',
	})
	function openCardPopup(item){
		CardPopup.show = true
		CardPopup.name = item.title
		CardPopup.src = item.imgurl
		CardPopup.price = `参考价格 ¥${item.price}`
	}
	
	
	// 上期中奖
	async function get_get_purse_list(){
		const res = await get_purse_list({
			type: 1,
			goods_id: state.goods_id,
			page: 1
		})
		state.goodsInfo = res.goodsInfo
	}
	
	
	
	const timer = ref(null)
	
	// 支付回调
	async function callback(order_num){
		state.order_num = order_num
		const res = await infinite_prizeorderlog({
			order_num: state.order_num
		})
		GoodsPopup.list = JSON.parse(JSON.stringify(res.data))
		console.log(GoodsPopup.list,'GoodsPopup.list')
		
		console.log('支付回调')
		console.log(jiangpin_show.value)
		jiangpin_show.value.clear = !jiangpin_show.value.clear
		// let topPrice = res.data.filter(item => item.shang_id == 34 || item.shang_id == 35)
		// if (topPrice.length > 0) this.$refs.guangxiaopopup.open()
		
		setTimeout(() => {
			// this.$refs.guangxiaopopup.close()
			jiangpin_show.value.showAni = true
			let arr = []
			state.list.forEach(item => {
				item.goods_list.forEach(_val => {
					arr.push(Object.assign(_val, {
						shang_color: item.shang_color,
						shang_id: item.shang_id
					}))
				})
			})
			arr = shuffleArray(arr)
			let remainder = res.data.length % 5;
			let quotient = Math.floor(res.data.length / 5);
			if (remainder > 0) quotient += 1
			let cur = 0
			let arr1 = [];
			const oriDataList = res.data;
			const datalist = shuffleArray(oriDataList)
			//const datalist = res.data
			arr1 = datalist.slice(cur, cur + 5)
			console.log('arr1, arr===>', arr1, arr);
			jiangpin_show.value.initDraw(arr1, arr)
			jiangpin_show.value.clear = false
			cur += 1
			if (quotient <= cur) {
				timer.value = null
				if (timer.value) clearInterval(timer.value)
				return
			}
			timer.value = setInterval(() => {
				console.log(quotient, cur);
				if (quotient > cur) {
					arr1 = datalist.slice(cur * 5, (cur + 1) * 5)
					jiangpin_show.value.allDrawnList = datalist.slice((cur -
						1) * 5, (cur) * 5)
					console.log('--->', datalist.slice((cur - 1) * 5, (cur) * 5));
					jiangpin_show.value.initDraw(arr1, arr)
					jiangpin_show.value.clear = false
					cur += 1
				} else {
					console.log('clearInterval');
					clearInterval(timer.value)
					timer.value = null
				}
			}, 8800)
		}, 800)
	}
	
	// 随机
	function shuffleArray(array) {
		console.log('changesort===>', array);
		for (let i = array.length - 1; i > 0; i--) {
			// 生成一个0到i之间的随机索引
			const j = Math.floor(Math.random() * (i + 1));
			// 交换array[i]和array[j]
			[array[i], array[j]] = [array[j], array[i]];
		}
		return array;
	}
	
	
	const GoodsPopup = reactive({
		show: false,
		list: []
	})
	function closeGoodsPopup(){
		GoodsPopup.show = false
	}
	
</script>

<style lang="scss">
	.shadow {
		box-shadow: 2rpx 2rpx 12rpx var(--shadow);
	}
	.color{
		color: var(--color);
	}

	.container {
		width: 100%;
		min-height: 100%;
		position: relative;
		overflow: hidden;
		box-sizing: border-box;
		padding: 0 30rpx;
		
	}
	
	.swiper-item{
		width: fit-content;
		height: fit-content;
	}
	.swiper-item-active{
		image{
			width: 250rpx;height: 250rpx;
		}
	}
	.swiper-item-default{
		opacity: 0.7;
		image{
			width: 210rpx;height: 210rpx;
		}
	}
</style>